<template>
  <div>
    <div id="nav">
      <vue-particles
          color="#555"
          :particleOpacity="0.7"
          :particlesNumber="150"
          shapeType="circle"
          :particleSize="4"
          linesColor="#555"
          :linesWidth="1"
          :lineLinked="true"
          :lineOpacity="0.4"
          :linesDistance="150"
          :moveSpeed="2"
          :hoverEffect="true"
          hoverMode="grab"
          :clickEffect="false"
          clickMode="push"
          class="lizi"
      />
    </div>
    <div id="login-container">
      <h1 style="text-align: center;height: 50px">干饭人学习平台</h1>
      <el-form :model="loginForm" @keyup.enter.native="login()" status-icon :rules="rules" ref="loginForm" label-width="20%">
        <el-form-item label="用户名" prop="username">
          <el-input type="text" v-model="loginForm.username" autocomplete="off" style="width: 80%;"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="loginForm.password" autocomplete="off" style="width: 80%;" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login()">登录</el-button>
          <el-button @click="openSignupForm()">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
    <Signup ref="signup_component"/>
  </div>
</template>

<script>
// import axios from 'axios'
import Signup from "@/components/Signup";

export default {
  name: "login",
  data() {
    var validateUsername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else {
        if (this.loginForm.password !== '') {
          this.$refs.loginForm.validateField('password');
        }
        callback();
      }
    };
    var validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          { validator: validateUsername, trigger: 'blur' }
        ],
        password: [
          { validator: validatePassword, trigger: 'blur' }
        ]
      },
      isLogin:false
    };
  },
  methods: {
    login() {
      this.$message("正在登录");
      let params = new URLSearchParams();
      params.append("username",this.loginForm.username);
      params.append("password",this.loginForm.password);
      this.$ajax.post(this.$server + "/user/jwtLogin",params)
        .then(res => {
          if(res.data.status === "success"){
            const { token } = res.data;
            localStorage.setItem("access_token",token);
            this.$message.success("登录成功");
            this.$router.push({path: "/student"});
          }else{
            this.$message.error("用户名或密码错误");
          }
        })
        .catch(error => {
          console.log("发生错误：" + error)
        })
    },
    //打开注册表单
    openSignupForm(){
        this.$refs.signup_component.signupForm.dialogFormVisible = true;
    },
    reset(formName) {
      this.$refs[formName].resetFields();
    }
  },
  components: {
    Signup
  },
}
</script>

<style scoped>
#login-container{
  width: 400px;
  height: 300px;
  margin: 0 auto;
}
body {
  width: 100%;
  background-color: rgb(239, 239, 239);
}

.lizi {
  position: fixed;
  top: 0;
  width: 100%;
}
</style>
